<template>
	<div>
		<slot name="footer"></slot>
		<div>我是tom</div>
		<slot name="header"></slot>
		<button @click="jAdd(3)">jerry+3</button>
		<div>tom{{ value }}</div>
	</div>
</template>

<script>
	// 1.第一步，创建事件中心
	import Eh from '../eventHub'
	export default {
		data() {
			return {
				key: 1,
				value: 1
			}
		},
		methods: {
			jAdd(increase) {
				// 3.触发事件listenToTom
				Eh.$emit('listenToTom', increase)
			}
		},
		mounted() {
			Eh.$on('jAdd', val => {
				this.value += val
			})
		}
	}
</script>

<style lang="scss" scoped>
	.footer {
		p {
			font-size: 20px;
			color: greenyellow;
		}
	}
</style>
